<template>
	<div>
		<div class="header1">
			<div class="header_time1">
				<p>{{ date }}</p>
				<h4>{{ month }}</h4>
			</div>
			<span class="greet1">{{ greet }}</span>
			<div class="tu8" @click="login"><img src="../assets/1.jpg" ref='pic5'></div>
		</div>
		<div class="box1">
			<Swiper :list='list'></Swiper>
		</div>
		<div>
			<div class="content2" v-for="item in listCont" :key='item.id' @click="jump(item.id)">
				<div class="text">
					<h3>{{ item.title }}</h3>
					<p>{{ item.hint }}</p>
				</div>
				<div class="picture"><img :src='item.images' /></div>
			</div>
			<div class="division">
				<!-- <div class="division_time">12月14日</div> -->
				<div class="division_xian"></div>
			</div>
			<div>
				<div class="content2" v-for="item in listBefore" :key='item.id' @click="jump(item.url)">
					<div class="text">
						<h3>{{ item.title }}</h3>
						<p>{{ item.hint }}</p>
					</div>
					<div class="picture"><img :src='item.images' /></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from '../components/swiper.vue';
	export default {
		data: function() {
			return {
				date: 1,
				month: '',
				time: 20201215,
				greet: '早上好',
				hour: 1,
				list: [],
				access_token:'',
				listCont: [],
				listBefore: [],
				listLongTime: [],
			}
		},
		components: {
			Swiper
		},
		mounted() {
			this.getTimeDate()
			this.getTimeMonth()
			this.getTimeHour()
			this.get()
			this.getList()
			this.getListBefore()
			window.onscroll = () => {
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				if (scrollTop + windowHeight == scrollHeight) {
					this.time--
				}
			}
			
			this.$refs.pic5.src = JSON.parse(localStorage.getItem('userinfo2')).src
		},
		watch: {
			time: function() {
				// console.log(newval,oldval)
				this.getListBefore()
			}
		},
		methods: {
			getTimeDate: function() {
				let date = new Date();

				let day = date.getDate()
				// console.log(day)
				return this.date = day
			},
			getTimeMonth: function() {
				let date = new Date();
				let month = date.getMonth() + 1;
				// console.log(month);
				switch (month) {
					case 1:
						return this.month = '一月';
					case 2:
						return this.month = '二月';
					case 3:
						return this.month = '三月';
					case 4:
						return this.month = '四月';
					case 5:
						return this.month = '五月';
					case 6:
						return this.month = '六月';
					case 7:
						return this.month = '七月';
					case 8:
						return this.month = '八月';
					case 9:
						return this.month = '九月';
					case 10:
						return this.month = '十月';
					case 11:
						return this.month = '十一月';
					case 12:
						return this.month = '十二月';
				}
			},
			getTimeHour: function() {
				let date = new Date();
				let hour = date.getHours();
				this.hour = hour
			},
			getList: function() {
				this.$axios.get('http://chonghekj.com/daily/index.php/Home/daily/latest', {

				}).then((res) => {
					// console.log(res)
					this.list = res.data.top_stories
					this.listCont = res.data.stories
					console.log(this.list)
				})
			},
			getListBefore: function() {
				this.$axios.get('http://chonghekj.com/daily/index.php/Home/daily/before', {
					params: {
						date: this.time
					}
				}).then((res) => {
					this.listLongTime = res.data.stories
					for (let i = 0; i < this.listLongTime.length; i++) {
						this.listBefore.push(this.listLongTime[i])
					}
				})
			},
			get: function() {
				if (this.hour > 9 && this.hour <= 12) {
					this.greet = '早上好'
				}
				if (this.hour > 12 && this.hour <= 14) {
					this.greet = '中午好'
				}
				if (this.hour > 14 && this.hour <= 18) {
					this.greet = '下午好'
				}
				if (this.hour > 18 && this.hour <= 9) {
					this.greet = '晚上好'
				}
			},
			jump: function(val) {
				console.log(val)
				this.ids = val
				this.$router.push({
					path: '/detail',
					query: {
						id: val
					}
				})
			},
			login:function(){
				this.$router.push({
					path:'/my',
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box1 {
		margin-top: 45px;
	}
	//改
	.tu8{
		width: 49px;
		height: 49;
		position: absolute;
		right: 10px;
		top: 2px;
	}
	.tu8 img{
		width: 100%;
		height: 100%;
	}
	.header1 {
		margin-bottom: 10px;
		position: fixed;
		height: 45px;
		top: 0;
		z-index: 999;
		width: 100%;
		background-color: #FFFFFF;
		padding-top: 10px;
		.header_time1 {
			display: inline-block;
			vertical-align: middle;
			width: 50px;
			text-align: center;
			border-right: 1px solid #CFCFCF;
			padding-right: 15px;

			p {
				margin: 0 !important;
			}

			h4 {
				margin: 0;
				font-size: 12px;
			}
		}

		.greet1 {
			margin-left: 20px;
			font-weight: 600;
			font-size: 17px;
		}
	}

	.content2 {
		display: flex;
		box-sizing: border-box;
		margin: 9px 9px 0 9px;

		.text {
			flex: 5;

			h3 {
				margin: 0;
				font-size: 14px;
				line-height: 25px
			}

			p {
				margin-top: 20px;
				font-size: 12px;
			}
		}

		.picture {
			flex: 2;
			text-align: right;

			img {
				width: 90px;
			}
		}
	}

	.division {
		width: 100%;
		display: flex;

		.division_time {
			font-size: 15px;
			flex: 2;
			vertical-align: middle;
		}

		.division_xian {
			flex: 6;
			height: 1px;
			background: #CFCFCF;
			margin-top: 10px;
		}
	}
</style>
<style>
	* {
		margin: 0;
		padding: 0;
	}
</style>